<template>
  <div>
    <a-menu style="width: 256px" mode="inline" theme="dark" :items="items" @click="clickmenu" />

    <a-modal v-model:open="open" width="800px" :footer="null" :title="title" @ok="handleOk">
      <a-table :dataSource="content" :pagination="false" :columns="columnsTable">
        <template #bodyCell="{ record, column }"></template>
      </a-table>
    </a-modal>

    <a-modal v-model:open="open2" width="1365px" :footer="null" :title="title2" @ok="handleOk2">
        
        <a-table bordered :scroll="{ x: 1600}" :dataSource="content2" :pagination="false" :columns="columnsTable2">

          <template #bodyCell="{ record, column }">
            <template v-if="column.key === 'requirementsPhoto' || column.key === 'signBuyName' || column.key === 'signDriverName' || column.key === 'signYaYunName'">
							<a-space wrap>
								<a-image
                  :width="50"
                  :src="record[column.key]"
                />
							</a-space>
            </template>
          </template>

        </a-table>

    </a-modal>


    <!-- v-for似乎3个都不要, 后面研究, 然后这里增加tabs 渣土车的到达提醒和叫号提醒 -->
    <a-modal v-model:open="open3" width="1000px" :footer="null" :title="title3" @ok="handleOk3">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="到达提醒">
          <a-table :dataSource="content3" :columns="columnsTable3">
            <template #bodyCell="{ record, column }"></template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="叫号提醒" force-render>
          <a-table :dataSource="content31" :columns="columnsTable3">
            <template #bodyCell="{ record, column }"></template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
      
    </a-modal>
    
  </div>
</template>
<script setup>
import { h, ref, watch } from 'vue';
import {
  MessageOutlined,
  UserOutlined,
  FileTextOutlined,
} from '@ant-design/icons-vue';

const activeKey = ref('1');
const title = ref('')
const content = ref([
{
  id: '41040098630',
  driverName: '何跃',
  telephone: ' ',
  identityCard: '522228198709291616',
  plateNo: '宁AB8565',
  depName: '宁夏京能宁东发电有限公司',
},{
  id: '41040098630',
  driverName: '何跃',
  telephone: ' ',
  identityCard: '522228198709291616',
  plateNo: '宁AB8565',
  depName: '宁夏京能宁东发电有限公司',
}
]);

const columnsTable = ref([
	{
		title: 'ID',
		dataIndex: 'id',
		key: 'id',
	},
	{
		title: '姓名',
		dataIndex: 'driverName',
		key: 'driverName',
	},
	{
		title: '电话',
		dataIndex: 'telephone',
		key: 'telephone',
	},
	{
		title: '身份证号码',
		dataIndex: 'identityCard',
		key: 'identityCard',
	},
	{
		title: '绑定车辆号码',
		dataIndex: 'plateNo',
		key: 'plateNo',
	},
	{
		title: '所属运输企业',
		dataIndex: 'depName',
		key: 'depName',
	},
])

//41040098630 驾驶员ID
//何跃 姓名
// 电话
//522228198709291616 身份证号码
//宁AB8565 绑定车辆号码
//宁夏京能宁东发电有限公司 所属运输企业

const open = ref(false);
const showModal = (who) => {
  title.value = who
  open.value = true;
};
const handleOk = e => {
  console.log(e);
  open.value = false;
};

import xie from '@/assets/xie.jpg'
import load from '@/assets/load.jpg'
import sign from '@/assets/sign.jpg'

const title2 = ref('')
let loadData = {
  id: '41040098630',
  plateNo: '宁AB8565',
  driverName: '何跃',
  yayunName: '黄细达',
  yunshudepName: '宁夏京能宁东发电有限公司',
  shengchandepName: '宁夏能京宁东发电有限公司',
  loadtime1: '2024年8月21日12:34:05',
  loadtime2: '2024年8月21日12:35:05',
  loadtime3: '2024年8月21日17:34:05',
  jiezhi1: '√',
  jiezhi2: '',
  jiezhi3: '',
  numweight1: '15',
  numweight2: '20',
  requirementsAddress: '',
  requirementsTime: '',
  requirementsPhoto: load,
  signBuyName:sign,
  signDriverName:sign,
  signYaYunName:sign,
}
let content2 = ref([loadData]);
let xieData = {
  id: '41040098630',
  plateNo: '宁AB8565',
  driverName: '何跃',
  yayunName: '黄细达',
  yunshudepName: '宁夏京能宁东发电有限公司',
  shengchandepName: '宁夏能京宁东发电有限公司',
  loadtime1: '2024年8月21日12:34:05',
  loadtime2: '2024年8月21日12:35:05',
  loadtime3: '2024年8月21日17:34:05',
  jiezhi1: '√',
  jiezhi2: '',
  jiezhi3: '',
  numweight1: '15',
  numweight2: '20',
  requirementsAddress: '',
  requirementsTime: '',
  requirementsPhoto: xie,
  signBuyName:sign,
  signDriverName:sign,
  signYaYunName:sign,
}

let columnsTable2 = ref([
	{
		title: 'ID',
		dataIndex: 'id',
		key: 'id',
	},
	{
		title: '绑定车辆号码',
		dataIndex: 'plateNo',
		key: 'plateNo',
	},
	{
		title: '驾驶员',
		dataIndex: 'driverName',
		key: 'driverName',
	},
	{
		title: '押运员',
		dataIndex: 'yayunName',
		key: 'yayunName',
	},
	{
		title: '运输企业',
		dataIndex: 'yunshudepName',
		key: 'yunshudepName',
	},
	{
		title: '生产企业',
		dataIndex: 'shengchandepName',
		key: 'shengchandepName',
	},
  {
		title: '装车用时',
    children:[
      {
        title: '到达时间',
        dataIndex: 'loadtime1',
        key: 'loadtime1',
      },
      {
        title: '进入时间',
        dataIndex: 'loadtime2',
        key: 'loadtime2',
      },
      {
        title: '离开时间',
        dataIndex: 'loadtime3',
        key: 'loadtime3',
      },
    ]
	},
	
	{
		title: '数量（重量）',
    children:[
      {
        title: '吨',
        dataIndex: 'numweight1',
        key: 'numweight1',
      },
      {
        title: '立方米',
        dataIndex: 'numweight2',
        key: 'numweight2',
      },
    ]
	},
	{
		title: '装车要求',
		children:[
      {
        title: '装车地点',
        dataIndex: 'requirementsAddress',
        key: 'requirementsAddress',
      },
      {
        title: '装车时间',
        dataIndex: 'requirementsTime',
        key: 'requirementsTime',
      },
      {
        title: '装车照片',
        dataIndex: 'requirementsPhoto',
        key: 'requirementsPhoto',
      },
    ]
	},
	{
		title: '签字',
		children:[
      {
        title: '采购企业负责人',
        dataIndex: 'signBuyName',
        key: 'signBuyName',
      },
      {
        title: '驾驶员',
        dataIndex: 'signDriverName',
        key: 'signDriverName',
      },
      {
        title: '押运员',
        dataIndex: 'signYaYunName',
        key: 'signYaYunName',
      },
    ]
	},
	
  
])
const open2 = ref(false);
const showModal2 = (who) => {
  columnsTable2.value[6]['title'] = who + '用时'
  columnsTable2.value[8]['title'] = who + '要求'
  columnsTable2.value[8]['children'][0]['title'] = who + '地点'
  columnsTable2.value[8]['children'][1]['title'] = who + '时间'
  columnsTable2.value[8]['children'][2]['title'] = who + '照片'
  if (who == '装车') {
    content2.value[0] = loadData
  }
  if (who == '卸车') {
    content2.value[0] = xieData
  }
  title2.value = who
  open2.value = true;
};
const handleOk2 = e => {
  console.log(e);
  open2.value = false;
};


const title3 = ref('')
// 一天大概15次
const content3 = ref([
  {sendtime: '2024年8月22日 05:30:00',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 07:10:15',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 08:45:45',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 09:30:00',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 10:20:30',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 11:45:00',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 13:05:15',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 14:25:00',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 15:40:00',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 16:25:30',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 17:30:00',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 18:50:00',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 20:35:00',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 22:10:00',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
  {sendtime: '2024年8月22日 23:45:00',sendcontent: '【XX渣土运输】 温馨提醒：您的渣土车已抵达指定区域，请做好接收准备，保持通道畅通。',},
]);
const content31 = ref([
  {sendtime: '2024年8月22日 05:45:12',sendcontent: '请注意，当前叫号：B005，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 07:22:34',sendcontent: '请注意，当前叫号：B089，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 08:59:07',sendcontent: '请注意，当前叫号：B123，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 09:45:21',sendcontent: '请注意，当前叫号：B145，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 10:33:08',sendcontent: '请注意，当前叫号：B201，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 11:56:45',sendcontent: '请注意，当前叫号：B248，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 13:18:22',sendcontent: '请注意，当前叫号：B256，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 14:40:09',sendcontent: '请注意，当前叫号：B322，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 15:55:32',sendcontent: '请注意，当前叫号：B369，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 16:37:15',sendcontent: '请注意，当前叫号：B387，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 17:49:03',sendcontent: '请注意，当前叫号：B407，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 19:12:26',sendcontent: '请注意，当前叫号：B448，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 20:54:47',sendcontent: '请注意，当前叫号：B493，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 22:27:01',sendcontent: '请注意，当前叫号：B522，请车牌号XXXXX的渣土车前往指定区域。'},
  {sendtime: '2024年8月22日 23:59:59',sendcontent: '请注意，当前叫号：B571，请车牌号XXXXX的渣土车前往指定区域。'},
]);
const columnsTable3 = ref([
  {
		title: '发送时间',
		dataIndex: 'sendtime',
		key: 'sendtime',
	},
	{
		title: '内容',
		dataIndex: 'sendcontent',
		key: 'sendcontent',
	},
])
const open3 = ref(false);
const showModal3 = (who) => {
  title3.value = who
  open3.value = true;
};
const handleOk3 = e => {
  console.log(e);
  open3.value = false;
};


const props = defineProps({
  updateStartDrive: Function,
  onCloseMenu: Function
})

//     const open1 = ref(props.open1);
// watch(() => props.open1, (newValue) => {
//   open1.value = newValue;
// });

const selectedKeys = ref(['1']);
const clickmenu = (e) => {
  console.info(e, 123136465);

}
const items = ref([
  {
    key: '1',
    icon: () => h(UserOutlined),
    label: '个人信息',
    title: '个人信息',
    onClick: () => {
    },
    children: [
      {
        label: '驾驶员',
        title: '驾驶员',
        key: '11',
        onClick: () => {
          showModal('驾驶员')
        },
        // children:[
        //   {
        //     label: '驾驶员ID',
        //     title: '驾驶员ID',
        //   },
        //   {
        //     label: '姓名',
        //     title: '姓名',
        //   },
        //   {
        //     label: '电话',
        //     title: '电话',
        //   },
        //   {
        //     label: '身份证号码',
        //     title: '身份证号码',
        //   },
        //   {
        //     label: '绑定车辆号码',
        //     title: '绑定车辆号码',
        //   },
        //   {
        //     label: '所属运输企业',
        //     title: '所属运输企业',
        //   },
        // ]
      },
      {
        label: '押运员',
        title: '押运员',
        key: '12',
        onClick: () => {
          showModal('押运员')
        },
        // children:[
        //   {
        //     label: '押运员ID',
        //     title: '押运员ID',
        //   },
        // ]
      },
    ]
  },
  {
    key: '2',
    icon: () => h(FileTextOutlined),
    label: '运输记录',
    title: '运输记录',
    onClick: () => {
    },
    children: [
      {
        key: '21',
        label: '装车',
        title: '装车',
        onClick: () => {
          showModal2('装车')
        },
      },
      {
        key: '22',
        label: '卸车',
        title: '卸车',
        onClick: () => {
          showModal2('卸车')
        },
      },
    ]
  },
  {
    key: '3',
    icon: () => h(MessageOutlined),
    label: '消息中心',
    title: '消息中心',
    onClick: () => {
      showModal3('消息中心')
    }
  },
  // {
  //   key: 'sub2',
  //   icon: () => h(SettingOutlined),
  //   label: 'Navigation Four',
  //   title: 'Navigation Four',
  //   children: [
  //     {
  //       key: '7',
  //       label: 'Option 7',
  //       title: 'Option 7',
  //     },
  //     {
  //       key: '8',
  //       label: 'Option 8',
  //       title: 'Option 8',
  //     }
  //   ],
  // },
]);
</script>